<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zookeeper 客户端</title>

    <link rel="stylesheet" href="../../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/animate.min.css" />
    <link rel="stylesheet" href="../../css/appbase.css" />
    <link rel="stylesheet" href="../../css/style.css" />

    <link rel="stylesheet" href="../../plugins/ztree/theme/bootstrap/ztree-bootstrap.css" />
    <link rel="stylesheet" href="../../plugins/contextMenu/jquery.contextMenu.min.css" />

    <style type="text/css">
        .tab-content .tab-pane textarea {
            width: 100%;
            height: 212px;
            border: 1px solid #ddd;
            font-size: 15px;
        }
        .tree-limit-width{
            width: 100%;
            overflow-y: scroll;
        }
        .node-title-show{
            width: 100%;
            height: 100px !important;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" >zookeeper 工具</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="panel panel-default ">
        <div class="panel-heading">设置区</div>
        <div class="panel-body">
            <div class="col-xs-9 ">
                <div class="input-group input-group-sm">
                    <div class="input-group-btn" id="connect">
                        <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                            <span></span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                        </ul>
                    </div>
                    <input class="form-control" name="connect" disabled/>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="button-group ">
                    <button id="newconnbtn" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> 新连接</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--树型节点和面板节点数据显示-->
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4 zoo-conn-tree">
            <input placeholder="搜索节点" name="kw" class="form-control" />
            <ul class="ztree tree-limit-width" id="zooconntree">
            </ul>
        </div>
        <div class="col-xs-8 node-info">
            <div class="node-title">
                <textarea id="nodenameshow" placeholder="点击时节点名称显示"  class="input input-lg node-title-show"></textarea>
            </div>

            <ul class="nav nav-tabs" id="nodeTab" >
                <li  ><a href="#nodedata"   data-toggle="tab">节点数据</a></li>
                <li  class="active"><a href="#nodeattr"   data-toggle="tab">节点属性</a></li>
                <li ><a href="#nodeACL"   data-toggle="tab">节点ACL权限</a></li>
            </ul>
            <!-- 标签页面板  -->
            <div class="tab-content" >
                <div  class="tab-pane fade " id="nodedata" >
                    <div class="col-xs-4 col-md-3 col-lg-2 " style="padding-left: 0;padding-right: 0;">
                        <select class="form-control" name="deserialize" size="11">
                        </select>
                    </div>
                    <div class="col-xs-8 col-md-9 col-lg-10" style="padding-left: 0;padding-right: 0;">
                        <textarea ></textarea>
                    </div>
                </div>
                <div  class="tab-pane active fade in" id="nodeattr">
                    <table class="table table-striped table-bordered table-condensed ">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>属性名</th>
                            <th>属性值</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div  class="tab-pane fade" id="nodeACL">
                    <table class="table table-striped table-bordered table-condensed ">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>schema</th>
                            <th>id</th>
                            <th>perm 值</th>
                            <th>权限列表</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--新连接-->
<div class="open-dialog" id="newconn">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-3 col-lg-1">连接名:</label>
            <div class="col-sm-9 col-lg-5">
                <input type="text" name="name" autocomplete="false"  spellcheck="false" class="form-control" placeholder="连接名称" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-3 col-lg-1">地址路径:</label>
            <div class="col-sm-9 col-lg-11">
                <input type="text" name="connectStrings" autocomplete="false" spellcheck="false"  class="form-control" placeholder="请求地址" />
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="attrTemplate">
    <tr >
        <td>{{index}}</td>
        <td>{{key}}</td>
        <td>{{value}}</td>
        <td>{{remark}}</td>
    </tr>
</script>
<script type="text/html" id="nodeacls">
    {{each acls as acl i}}
    <tr >
        <td>{{i + 1}}</td>
        <td>{{acl.schema}}</td>
        <td>{{acl.id}}</td>
        <td>{{acl.perms}}</td>
        <td>
            {{each acl.permsParser as perm}}
            <span>{{perm}}</span>
            {{/each}}
        </td>
    </tr>
    {{/each}}
</script>
<script type="text/javascript" src="../../js/requirejs2.1.11-min.js"></script>
<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript">
    require([ 'bootstrap','tools/zkclient']);
</script>
</body>
</html>